<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.事件修饰符</title>
		<style>
			.demo{
				background-color: skyblue;
				width: 500px;
				height: 200px;
				padding: 30px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>{{msg}}</h2>
			<!-- prevent修饰符，可以阻止默认行为 -->
			<form>
				<button @click.prevent="welcome1">点我1</button>
			</form>
			<br><br>

			<!-- stop修饰符，可以阻止冒泡 -->
			<div @click="welcome2" class="demo">
				<button @click.stop="welcome2">点我2</button>
			</div>
			<br><br>

			<!-- once修饰符，让按钮只能响应事件1此 -->
			<button @click.once="welcome3">点我第二次我不响应</button>

			<!-- 修饰符还可以串联 -->
			<div @click="welcome4">
				<a href="http://www.atguigu.com" @click.stop.prevent="welcome4">点我4</a>
			</div>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					msg:'欢迎来到尚硅谷学习前端！'
				},
				methods:{
					welcome1(e){
						// e.preventDefault() //靠程序员自己亲自去阻止默认行为
						alert('同学你好1！')
					},
					welcome2(e){
						// e.stopPropagation() //靠程序员自己亲自去阻止冒泡
						alert('同学你好2！')
					},
					welcome3(){
						alert('同学你好3！')
					},
					welcome4(){
						alert('同学你好4！')
					}
				}
			})
		</script>
	</body>
</html>